import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { View, Text, TextInput, StyleSheet, ScrollView } from 'react-native'
import { Toast, Modal, List, InputItem } from 'antd-mobile'
import Spinner from 'react-native-loading-spinner-overlay'
import { createAction, NavigationActions } from '../../utils/index'
import {connect} from 'react-redux'
import { Button } from 'react-native-elements'

const alert = Modal.alert

import screen from '../../utils/screen'

class SingleLine extends PureComponent {
  static propTypes = {
    extra: PropTypes.any,
    title: PropTypes.any,
    leftText: PropTypes.any,
    value: PropTypes.any,
    editable : PropTypes.any,
    onChange: PropTypes.any
  }
  static defaultProps = {
    editable: true
  }
  constructor(props) {
    super(props)
  }
  renderRight = () => {
    const { title, leftText,value, onChange, disabled,editable, extra } = this.props
    const extraTxt = extra || "万元"
    if(!!title) {
      return (
        <View />
      )
    } else {
      return (
        <View style={{flex: 2 ,flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
          <TextInput onChangeText={onChange} value={value} editable={editable} style={{width: screen.pxToDp(150), textAlign:'right'}} maxLength = {12} />
          <Text style={{minWidth: screen.pxToDp(90)}}>{extraTxt}</Text>
        </View>
      )
    }
  }
  render() {
    const { title, leftText,value, onChange, disabled,editable, extra } = this.props
    const hasTitle = title || false
    return (
      <View style={{flexDirection: 'row', height: screen.pxToDp(80)}}>
        <View style={{flex: 3, justifyContent: 'center'}}>
          <Text style={{color: '#636363', fontSize: screen.pxToDp(30) }}>{this.props.children}</Text>
        </View>
        {
          this.renderRight()
        }
      </View>
    )
  }
}


@connect(({ tzyc, loading }) => ({ ...tzyc, isLoading: loading.models.tzyc }))
export default class extends PureComponent {
  constructor(props) {
    super(props)
  }
  onFieldChange = (obj) => {
    this.props.dispatch(createAction("tzyc/changeState")(obj))
  }

  componentWillMount() {
    this.props.dispatch(createAction("tzyc/initState")({}))
  }

  reset = () => {
    alert('重置', '是否继续？', [
      { text: '取消', onPress: () => console.log('cancel') },
      { text: '确定', onPress: () => {
        this.props.dispatch(createAction("tzyc/initState")({}))
      }},
    ])
  }

  submitOne = () => {
    this.props.dispatch(createAction("tzyc/tzycOne")({}))
  }

  submitTwo = () => {
    const { mainTime}  = this.props;
    this.props.dispatch(createAction("tzyc/tzycTwo")(mainTime))
  }

  render() {
    const { tax, pay,dpay, qpay, funds,fundsHand,loan,allYear,startYear,oneIncome,oneNoIncome,limits,incomeGrowth,yycb,xsfy,glfy,cwfy,zjsr,ycmqs,srsy,yycbzz,zcje,fjsl,zzsfh,sds,jkll,tzl, isLoading } = this.props
    const disableNext = dpay === ""
    return (
      <View style={{flex: 1, backgroundColor: '#fff', paddingHorizontal: screen.pxToDp(20)}}>
        <Spinner visible={isLoading} />
        <View style={{height: screen.pxToDp(20)}}></View>
        <ScrollView>
          <View>
            <Text style={{color: '#202020'}}>提示: 以下带*的为必填内容,填写规则见“<Text style={{color: '#0444fb',textDecorationLine:"underline"}} onPress={() => {
              this.props.navigation.navigate('ForecastStack')
            }}>填写指南</Text>”</Text>
          </View>
          <View>
            <Text style={styles.titleText}>1.基本数据</Text>
            <SingleLine  value={tax} onChange={(v) => {this.onFieldChange({tax: v})}}>1.1支出金额(含税) *</SingleLine>
            <SingleLine value={pay} onChange={(v) => {this.onFieldChange({pay: v})}}>其中: 支出金额(不含税) *</SingleLine>
            <SingleLine value={dpay} editable={false}>可抵扣增值税额</SingleLine>
            <SingleLine value={qpay} editable={false}>其他税额</SingleLine>
            <SingleLine extra="" value={funds} editable={false}>1.2资金来源</SingleLine>
            <SingleLine value={fundsHand} onChange={(v) => {this.onFieldChange({fundsHand: v})}}>其中:自有资金 *</SingleLine>
            <SingleLine value={loan} onChange={(v) => {this.onFieldChange({loan: v })}} editable={false}>借款</SingleLine>
            <SingleLine title>预测年限 </SingleLine>
            <SingleLine extra="年"  value={allYear} onChange={(v) => {this.onFieldChange({allYear: v})}}>项目总年限 *</SingleLine>
            <SingleLine extra="年" value={startYear} onChange={(v) => {this.onFieldChange({startYear: v})}}>预计从第几年开始正式取得收益 *</SingleLine>
            <Text style={styles.titleText}>2.预测期数据</Text>
            <SingleLine value={oneIncome} onChange={(v) => {this.onFieldChange({oneIncome: v})}} >2.1预测第一年收入(含税) *</SingleLine>
            <SingleLine value={oneNoIncome} onChange={(v) => {this.onFieldChange({oneNoIncome: v})}} editable={false}>其中: 预测第一年收入(不含税)</SingleLine>
            <SingleLine value={limits} onChange={(v) => { this.onFieldChange({limits: v})}} editable={false}>税额</SingleLine>
            <SingleLine extra="%" value={incomeGrowth} onChange={(v) => { this.onFieldChange({incomeGrowth: v})}}>2.2 收入增长率 *</SingleLine>
            <SingleLine extra="%" value={yycb} onChange={(v) => { this.onFieldChange({yycb: v})}}>2.3 营业成本收入比 *</SingleLine>
            <SingleLine extra="%" value={xsfy} onChange={(v) => { this.onFieldChange({xsfy: v})}}>2.4 销售费用收入比 *</SingleLine>
            <SingleLine extra="%"  value={glfy} onChange={(v) => { this.onFieldChange({glfy: v})}}>2.5 管理费用收入比*</SingleLine>
            <SingleLine extra="%"  value={cwfy} onChange={(v) => { this.onFieldChange({cwfy: v})}}>2.6 财务费用收入比 *</SingleLine>
            <SingleLine extra="%"  value={zjsr} onChange={(v) => { this.onFieldChange({zjsr: v})}}>2.7 折旧收入比 *</SingleLine>
            <SingleLine extra="万元"  value={ycmqs} onChange={(v) => { this.onFieldChange({ycmqs: v})}}>2.8 预测末期处置全部权益可回收或需支付的资金 *</SingleLine>
            <Text style={styles.titleText}>3. 参数</Text>
            <SingleLine title>3.1 增值税率及附加费用</SingleLine>
            <SingleLine extra="%"  value={srsy} onChange={(v) => { this.onFieldChange({srsy: v})}}>其中：收入适用的增值税税率* </SingleLine>
            <SingleLine extra="%"  value={yycbzz} onChange={(v) => { this.onFieldChange({yycbzz: v})}}>营业成本适用的增值税税率*</SingleLine>
            <SingleLine extra="%"  value={zcje} onChange={(v) => { this.onFieldChange({zcje: v})}}>支出金额适用的增值税税率* </SingleLine>
            <SingleLine extra="%"  value={fjsl} onChange={(v) => { this.onFieldChange({fjsl: v})}}>附加税率*</SingleLine>
            <SingleLine extra="%"  value={zzsfh} onChange={(v) => { this.onFieldChange({zzsfh: v})}}>增值税返还率* </SingleLine>
            <SingleLine extra="%"  value={sds} onChange={(v) => { this.onFieldChange({sds: v})}}>3.2所得税率</SingleLine>
            <SingleLine extra="%"  value={jkll} onChange={(v) => { this.onFieldChange({jkll: v})}}>3.3借款利率</SingleLine>
            <SingleLine extra="%"  value={tzl} onChange={(v) => { this.onFieldChange({tzl: v})}}>3.4通胀率</SingleLine>
          </View>
        </ScrollView>
        <View style={{paddingVertical: screen.pxToDp(30), height: screen.pxToDp(100), flexDirection: 'row', justifyContent: 'space-around'}}>
          <Button onPress={this.reset} buttonStyle={{width: screen.pxToDp(150), height:screen.pxToDp(60)}} title="重置" />
          <Button onPress={this.submitOne} buttonStyle={{width: screen.pxToDp(150), height: screen.pxToDp(60), backgroundColor: '#108EE9'}} title="预提交" />
          <Button disabled={disableNext} onPress={ this.submitTwo} buttonStyle={{width: screen.pxToDp(150), height: screen.pxToDp(60), backgroundColor: '#108EE9'}} title="提交" />
        </View>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
  titleText: {
    marginVertical: screen.pxToDp(20),
    fontSize: screen.pxToDp(36),
    color: '#202020'
  },
  contentText: {
    fontSize: screen.pxToDp(30),
    color: '#636363',
    height: screen.pxToDp(70)
  }
})
